import React, { useState, useEffect, useRef } from 'react';
import styles from './style.less';
import { Table, Space, Row, Col, Button } from 'antd';
import Query from '@/components/Global/Query/index';
// import QueryDemo from '@/components/Global/QueryDemo';
import Footer from '@/components/Global/Footer';
import { ColumnsType } from 'antd/es/table';
import { KeyWordColumn } from './data';
import { getTable } from './service';
// import { useHistory } from 'react-router-dom';
import { history } from 'umi';

const columns: ColumnsType<KeyWordColumn> = [
  {
    title: '关键词',
    dataIndex: 'keyword',
    key: 'keyword',
    className: styles.content,
    width: 210,
  },
  {
    title: '单元名称',
    dataIndex: 'unitName',
    key: 'unitName',
    className: styles.content,
    width: 210,
  },
  {
    title: '计划名称',
    dataIndex: 'planName',
    key: 'planName',
    className: styles.content,
    // className: `${styles.content} ${styles.plan}`,
    width: 210,
    // align: 'center'
    // onCell(record, rowIndex) {
    //   console.log(record, rowIndex)
    //   return {
    //       className: styles[`.....`],
    //   };
    // }
  },
  {
    title: '关键词状态',
    dataIndex: 'status',
    key: 'status',
    sorter: (a, b) => a.status - b.status,
    // align: 'center',
    className: styles.content,
    width: 150,
  },
  {
    title: '推广平台',
    dataIndex: 'platformChannel',
    key: 'platformChannel',
    // align: 'center',
    className: styles.content,
    width: 200,
  },
  {
    title: '推广账号',
    dataIndex: 'platformAccount',
    key: 'platformAccount',
    // align: 'center'
    className: styles.content,
    width: 300,
  },
  {
    title: '平台状态',
    dataIndex: 'keywordStatus',
    key: 'keywordStatus',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '出价',
    dataIndex: 'price',
    key: 'price',
    // align: 'center'
    className: styles.content,
    width: 100,
  },
  {
    title: '展示次数',
    dataIndex: 'showCount',
    key: 'showCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击次数',
    dataIndex: 'clickCount',
    key: 'clickCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击率',
    dataIndex: 'clickNate',
    key: 'clickNate',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '平均点击费用',
    dataIndex: 'avgPrice',
    key: 'avgPrice',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '匹配方式',
    dataIndex: 'matchType',
    key: 'matchType',
    // align: 'center'
    className: styles.content,
    width: 100,
  },
  {
    title: 'P-URL',
    dataIndex: 'pcUrl',
    key: 'pcUrl',
    // align: 'center'
    className: styles.content,
    ellipsis: true,
    width: 150,
  },
  {
    title: 'M-URL',
    dataIndex: 'mobileUrl',
    key: 'mobileUrl',
    // align: 'center'
    className: styles.content,
    ellipsis: true,
    width: 150,
  },
  {
    title: 'P-URL(跟踪)',
    dataIndex: 'tailPcUrl',
    key: 'tailPcUrl',
    // align: 'center'
    className: styles.content,
    ellipsis: true,
    width: 150,
  },
  {
    title: 'M-URL(跟踪)',
    dataIndex: 'tailMobileUrl',
    key: 'tailMobileUrl',
    // align: 'center'
    className: styles.content,
    ellipsis: true,
    width: 150,
  },
  {
    title: '操作',
    key: 'operation',
    // align: 'center',
    className: `${styles.content} ${styles.action}`,
    width: 130,
    // fixed: 'right',
    render: () => (
      // text:string, record:object
      <Space size="middle">
        <a>编辑</a>
        <a>删除</a>
      </Space>
    ),
  },
];

const queryList = [
  {
    name: 'planName',
    label: '计划名称',
    type: 'input',
    tips: '请输入计划名称',
    colNum: 4
  },
  {
    name: 'unitName',
    label: '单元名称',
    type: 'input',
    tips: '请输入单元名称',
    colNum: 4
  },
  {
    name: 'status',
    label: '关键词状态',
    type: 'select',
    tips: '请选择关键词状态',
    children: [
      {
        value: '0',
        label: '正常',
      },
      {
        value: '1',
        label: '失败',
      },
    ],
    colNum: 4
  },
  {
    name: 'time',
    label: '统计时间',
    type: 'date',
    tips: '请选择计划状态',
    colNum: 7
  },
];

let params = {
  planName: '',
  unitName: '',
  status: [],
  platformAccount: 'null',
  startDate: '2021-07-19',
  endDate: '2021-07-19',
  page: 1,
  rows: 10,
};

export default function KeyWordTable() {
  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState(1);
  const btnRef = useRef<any>(null!);
  // console.log(btnRef, '父组件');

  const reset = () => {
    const form = btnRef.current.getForm();
    form.resetFields();
    console.log('清空了表单开始处理逻辑');
    params = {
      planName: '',
      unitName: '',
      status: [],
      platformAccount: 'null',
      startDate: '2021-07-19',
      endDate: '2021-07-19',
      page: 1,
      rows: 10,
    };
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  const query = (value: any) => {
    // console.log(value, '表单数据');
    params = {
      ...params,
      ...value,
    };
    getTable(params).then((res) => {
      // console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  // const history = useHistory();

  const addKeyWord = () => {
    console.log(history);
    console.log(history.location.pathname);
    console.log(history.length);
    // history.replace('/promotion/promotion_accounts/detail');
    // history.replace('/promotion/promotion_accounts/detail', {
    //   query: {
    //     name: 'test'
    //   }
    // });
    history.push('/promotion/promotion_keyword/detail', {
      name: 'test',
    });
  };

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: KeyWordColumn[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    }
  };

  useEffect(() => {
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
        // setTableData([]);
      }
    });
  }, []);


  return (
    <>
      <Query flag queryList={queryList} queryClick={query} resetClick={reset} ref={btnRef} />
      <Row>
        <Col flex="auto">
          <Table<KeyWordColumn>
            dataSource={tableData}
            columns={columns}
            rowSelection={{
              ...rowSelection,
            }}
            pagination={false}
            rowKey={(record) => record.id}
            // locale={{ emptyText: "空空如也呀~" }}
            scroll={{ y: 600 }}
          ></Table>
        </Col>
      </Row>
      <Footer
        footer={styles.footer}
        length={tableData.length}
        current={page}
        buttonGroup={
          <>
            <Button className={styles.addBtn} onClick={addKeyWord}>添加关键词</Button>
            <Button>导出数据</Button>
          </>
        }
      />
    </>
  );
}
